<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交受控组件</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
       class Abc extends React.Component{
           // 初始化状态
           state = {
               username:'',
               password:''
           }
           saveUsername=(event)=>{
           console.log(event.target.value)
            // 改变状态
            this.setState({username:event.target.value})
        }

           savePassword=(event)=>{
            // React的双向绑定,监听input的onchange事件
            // console.log(event.target.value)
               this.setState({password:event.target.value})
        }
           handleSubmit=(event)=>{
               event.preventDefault()
               const {username,password} = this.state
               alert(`用户名:${username},密码:${password}`)
           }


           render(){
               return (
                   <form action="" onSubmit={this.handleSubmit}>
                       用户名:<input onChange={this.saveUsername} type="text"/>
                       密码:<input onChange={this.savePassword} type="password" />
                       <button>登录</button>
                   </form>
               )
           }
       }
        ReactDOM.render(<Abc/>,document.getElementById('app'))




    </script>
</body>
</html>
